import React, { FunctionComponent, useEffect, useState } from 'react';
import styles from './index.less';
import { Rate } from 'react-vant';
import RecommendItem, { IRecommendItem } from './recommenditem';
import { HttpService } from '@/core';
import api from '@/api';
import { IStoreProps } from '../../index';

export interface IProps extends IStoreProps { }

const Recommend: FunctionComponent<IProps> = ({score,rankRate,serviceScore,foodScore}) => {

    /** 评论列表 */
    const [recommendList, setRecommendList] = useState<Array<IRecommendItem>>([]);

    useEffect(() => {
        console.log('评论初始化');
        getRecommendList()
    }, []);


    /** 获取评论列表 */
    const getRecommendList = () => {
        HttpService.get(api.getRantis, {}).then(res => {
            const { data, errno } = res as { data: IRecommendItem[]; errno: number; }
            if (data && errno === 0) {
                setRecommendList(data)
            }
        })
    }

    return (
        <div className={styles.recommend}>
            <div className={styles.recommend_head}>
                <div className={styles.recommend_head_overview}>
                    <div className={styles.recommend_head_overview_scroe}>{score}</div>
                    <div className={styles.recommend_head_overview_title}>综合评分</div>
                    <div className={styles.recommend_head_overview_rank}>高于周边商家{rankRate}%</div>
                </div>
                <div className={styles.recommend_head_overscore}>
                    <div className={styles.recommend_head_overscore_content}>
                        <span className={styles.title}>服务态度</span>
                        <Rate value={serviceScore}></Rate>
                        <span className={styles.score}>{serviceScore}</span>
                    </div>
                    <div className={styles.recommend_head_overscore_content}>
                        <span className={styles.title}>商品评分</span>
                        <Rate value={foodScore}></Rate>
                        <span className={styles.score}>{foodScore}</span>
                    </div>
                    <div className={styles.recommend_head_overscore_content}>
                        <span className={styles.title}>送达时间</span>
                        <span className={styles.subtitle}>8分钟</span>
                    </div>
                </div>
            </div>
            <div className={styles.recommend_whitespace}></div>
            <div className={styles.recommend_list}>
                {
                    recommendList?.map((item: IRecommendItem, index: number) => (
                        <RecommendItem key={`recommend${index}`} {...item}></RecommendItem>
                    ))
                }
            </div>
        </div>
    )
}

export default Recommend